
import './Invite.scss'
import { Button, Input, Tooltip, Select } from 'antd'
import { InfoCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons'
function Invite() {
    const text = <span>查看各成员权限说明</span>
    return (
        <div className='invite-box'>
            <h3>邀请成员</h3>
            <div className="invite-link">
                <p>发送链接邀请好友加入企业，一起创作吧~</p>
                <a href="#">邮件邀请</a>
            </div>
            <div className="invite-btn">
                <Input
                    className='invite-input'
                    placeholder='https://www.gaoding.com/inviter/DyirJ8Mb'>
                </Input>
                <Button type='primary' className='invite-button'>复制链接</Button>
            </div>

            <div className="invite-limit">
                <h4>邀请权限设置

                    <span className='invite-question'>
                        <Tooltip placement="top" title={text}><QuestionCircleOutlined /></Tooltip></span>


                </h4>
            </div>

            <div className="invite-role">
                <span style={{ fontSize: '14px' }}>选择角色</span>
                <Select
                    defaultValue="管理员"
                    style={{ width: 130, height: 35 }}

                    options={[
                        { value: '管理员', label: '管理员' },
                        { value: '成员', label: '成员' },

                    ]}
                />
            </div>

            <div className="invite-success">
                <p style={{fontWeight:'bold'}}>首次邀请成功，免费获得 <span style={{color:"#2b45d6"}}>100 稿豆</span>，解锁更多 AI 作图场景<span style={{fontWeight:'normal'}}><InfoCircleOutlined /></span></p>
            </div>
        </div>
    )
}

export default Invite
